<template>
  <div class="app">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      title="个人信息"
      placeholder
      fixed
    />
    <van-cell-group>
      <van-cell :center="true" title="头像" is-link>
        <template #value>
          <!-- :reupload="true"覆盖上传，没有预览图片 -->
          <van-uploader
            :reupload="true"
            :deletable="false"
            v-model="fileList"
            :after-read="getFileUrlFn"
            :max-count="1"
            accept="image/png, image/jpeg"
          />
        </template>
      </van-cell>

      <van-cell title="昵称" :value="userInfo.nickName" is-link to="updatenickname" />
      <van-cell :center="true" title="收货地址" is-link to="addressedit">
        <template #value>
          <div v-html="addressStr"></div>
        </template>
      </van-cell>
      <van-cell title="性别" :value="userInfo.gender" is-link to="updategender" />
      <van-cell title="生日" :value="userInfo.birthday" is-link to="updatebirthday" />
      <van-cell title="年龄" :value="userInfo.age" is-link to="updateage" />
      <van-cell title="修改密码" is-link to="updatepassword" />
    </van-cell-group>
  </div>
</template>

<script setup>
import { getUserInfoReq, userModifyReq } from '@/api/user'
import { ref } from 'vue'
let userInfo = ref({})
let addressStr = ref('')
// 获取用户信息
function getUserInfo() {
  getUserInfoReq().then((res) => {
    // console.log(res.data.data)
    userInfo.value = res.data.data
    addressStr.value = res.data.data.address +'<br>'+ res.data.data.area
    fileList.value[0] = { url: res.data.data.avatar }
  })
}
getUserInfo()

import { fileUploadReq } from '@/api/user'
let fileList = ref([])
//修改头像
let avatar = ref('')
function getFileUrlFn(file) {
  fileUploadReq(file.file).then((res) => {
    avatar.value = 'http://localhost:1337' + res.data.data
    userModifyReq(
      userInfo.value.birthday,
      userInfo.value.age,
      avatar.value,
      userInfo.value.area,
      userInfo.value.address,
      userInfo.value.nickName,
      userInfo.value.gender,
    ).then((res) => {
      if (res.data.code === 1) {
        // eslint-disable-next-line no-undef
        showSuccessToast('头像修改成功')
        getUserInfo()
      } else {
        // eslint-disable-next-line no-undef
        showFailToast('头像修改失败')
      }
    })
  })
}
</script>

<style scoped lang="scss"></style>
